<style scoped lang="less"></style>
<template>
  <el-header class="page-header iot-header">
    <!-- <img class="logo" :src="titleImg" alt=""> -->
    <h1 class="title">{{ title }}</h1>
    <div class="header-right">
      <el-dropdown class="mr-10" trigger="click" @command="handleDomicile">
        <span class="el-dropdown-link">
          户籍化管理
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="command">
            应急指挥
          </el-dropdown-item>
          <el-dropdown-item command="enterprise">
            一企一档
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown class="mr-10" trigger="click" @command="handleIOTCommand">
        <span class="el-dropdown-link">
          智慧物联网系统
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            :command="item.type"
            v-for="(item, index) in iotMenuList"
            :key="index"
          >
            {{ item.title }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          <img
            class="avatar"
            src="../../assets/images/index/avatar.png"
            alt="潍坊监管"
          />
          {{ siteInfos.userRealName || siteInfos.accountname || "潍坊监管" }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="home">进入后台</el-dropdown-item>
          <el-dropdown-item command="exit">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="header-left"><Time></Time></div>
  </el-header>
</template>
<script>
import { mapState } from "vuex";
import Time from "@/components/Time.vue";
import navPath from "@/assets/js/homeNav";
export default {
  name: "HomeHeader",
  props: {
    type: {
      type: String,
      default: "fireControl",
    },
  },
  components: {
    Time,
  },
  computed: {
    ...mapState(["siteInfos"]),
    typeMap() {
      const type = this.config.typeMap;
      const temp = {};
      for (let i in type) {
        temp[type[i]] = i;
      }
      return temp;
    },
    iotMenuList() {
      return [...[this.overallMenu], ...this.iotMenu];
    },
  },
  watch: {},
  data() {
    return {
      loading: false,
      title: "",
      iotMenu: [],
      overallMenu: {},
    };
  },
  methods: {
    setTitle(classify, list) {
      let title = list.filter((item) => item.deviceClassify == classify);
      if (title.length > 0) {
        this.title = title[0].titleText;
      }
    },
    getTitle() {
      this.title = this.$route.query.title;
      this.$get("/systemsetup/systemsetup/getHomePageLayoutList", {
        homeId: this.siteInfos.homeId,
      }).then((res) => {
        let list = res.data;
        const mainItem = list.find((item) => item.permissionsId == "007");
        if (!this.title) {
          this.title = mainItem.subtitleName;
        }
        this.overallMenu = {
          icon: mainItem.logo,
          type: this.typeMap[100],
          title: mainItem.subtitleName,
        };
      });
    },
    getHomeNavList() {
      this.getTypeList((list) => {
        // 原
        // const temp = list.map((item) => {
        //   return {
        //     icon: item.icon,
        //     type: this.typeMap[item.id],
        //     title: item.name,
        //   };
        // });

        const templist = list.filter((item) => item.id !== "20");
        const temp = templist.map((item) => {
          return {
            icon: item.icon,
            type: this.typeMap[item.id],
            title: item.name,
          };
        });
        const currentPath = temp.find((item) => item.type == this.type);
        if (currentPath) {
          this.title = currentPath.title;
        }
        this.iotMenu = temp;
      });
    },
    formatNav(navList) {
      const temp = [];
      navList.forEach((item) => {
        const path = navPath[item.permissionsId];
        if (
          path &&
          path.url == "/IOT" &&
          this.siteInfos.navBar.indexOf(item.permissionsId) >= 0
        ) {
          temp.push({
            title: item.subtitleName,
            deviceClassify: path.query.deviceClassify,
            type: path.query.type,
          });
        }
      });
      temp.push({
        title: "开关量监测系统",
        deviceClassify: 19,
        type: "switcher",
      });
      const currentPath = temp.find((item) => item.type == this.type);
      this.title = currentPath.title;
      this.iotMenu = temp;
    },
    exitAction() {
      this.$ajax({
        url: "/systemsetup/systemsetup/logout",
        method: "delete",
      }).then(
        (res) => {
          this.$ajax({
            url: "/systemsetup/systemsetup/logout2",
            method: "delete",
          }).then(
            (res) => {
              this.$router.replace("/login");
              this.$store.commit("setSiteInfos", null);
            },
            (err) => {
              this.$message.error(err.msg);
            }
          );
        },
        (err) => {
          this.$message.error(err.msg);
        }
      );
    },
    handleCommand(command) {
      if (command == "exit") {
        this.exitAction();
      } else if (command == "home") {
        this.$router.push("/");
      }
    },
    handleIOTCommand(command) {
      const path = this.iotMenuList.find((item) => item.type == command);
      if (command == "switcher") {
        this.$router.replace({
          path: "/switchMonitor",
          query: {
            title: path.title,
          },
        });
        return;
      }
      if (command == "video") {
        this.$router.replace({
          path: "/monitorAll",
          query: {
            title: path.title,
          },
        });
        return;
      }
      this.$router.replace({
        path: "/IOT",
        query: {
          type: path.type,
          title: path.title,
        },
      });
    },
    handleDomicile(command){
      if(command=='command'){
        this.$router.replace({
        path: "/IOT",
        query: {
          type: 'command',
          title: '应急指挥',
        },
      });
        return
      }
      this.$router.replace({
        path: "/enterprise",
        query: {
          title: '一企一档',
        },
      });
    }
  },
  created() {
    this.getTitle();
    this.getHomeNavList();
  },
};
</script>
